<template>
  <div class="wrap">
    <div class="nav-wrap">
      <div class="nav-title">品类 Category</div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        text-color="#808285"
        unique-opened
        active-text-color="black"
      >
      <el-submenu  v-for="(item,i) in FirstCatery" :key="i" :index="i+''">
        <template slot="title">
          <span>{{item.primaryName}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item  @click="getFirstCatery(name.secondaryName);sendCateryName({f:item.primaryName,s:name.secondaryName})" :index="i+'-'+g" v-for="(name,g) in item.classSecondaries" :key="g">{{name.secondaryName}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      </el-menu>
    </div>
    <div class="list-wrap">
      <ul>
        <li v-for="(item,i) in ItemList" :key="i">
          <div class="goods">
            <a :href="'/detail.html?item_id=' + item.item_id">
              <div class="img-wrap">
                <img :src="item.pic_url" alt />
              </div>
            </a>
            <div class="small-img">
              <img :src="item.pic_url" alt />
            </div>
            <p class="goodsName">{{item.item_title_name}}</p>
            <p class="goodPrice-wrap">
              ￥
              <span class="goodsPrice">{{item.price}}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "AsideNav",
  data(){
    return{
      // 一级二级分类名
      FirstCatery:null,
      // 某分类下的商品
      ItemList:[],
      primaryId:6
    }
  },
  methods:{

    sendCateryName(name){
      this.$emit('getName',name)
    },
    getFirstCatery(str){
      
      this.getItemList(str);

    },
     // 获取该二级分类的商品信息 
    getItemList(obj){
      this.axios.get('http://129.28.184.223:8080/classSecondary/selectBy',{ 
          params:{
            secondaryName:obj
          }
          
          }).then((res)=>{
            this.ItemList=res.data;

          }).catch((err)=>{
            console.log(err);
          })
    }  
  },

  beforeCreate:function(){
        // 获取分类导航栏

        this.axios.get('http://129.28.184.223:8080/classPrimary/select',{ 
        params:{
          name
        }
        
        }).then((res)=>{
          this.FirstCatery=res.data;

        }).catch((err)=>{
          console.log(err);
        })
        // 获取首页传过来的一级分类名

        let url=window.location.search;
        if(url!==''){
          let i=url.indexOf('=')+1;
          url = url.substr(i);
          this.primaryId=url;
        }else{
          this.primaryId=6
        }
        
        // 获取二级分类名
        this.axios.get('http://129.28.184.223:8080/classPrimary/selectOne',{ 
        params:{
         id:this.primaryId
        }
        
        }).then((res)=>{
         this.secondaryName=res.data.classSecondaries[0].secondaryName;
         this.getItemList(this.secondaryName);

        }).catch((err)=>{
          console.log(err);
        })
       
     
  },

};
</script>

<style lang="less">
.wrap {
  display: flex;

  .nav-wrap {
    width: 215px;
    min-height: 646px;
    border: 1px solid #d1d3d4;
    padding: 0 0 32px 15px;

    .nav-title {
      font-size: 14px;
      margin-top: 20px;
      color: #808285;
      border-bottom: 1px #808285 solid;
    }
  }
  .list-wrap {
    width: 960px;

    & > ul {
      width: 980px;
      display: flex;
      justify-content: left;
      flex-wrap: wrap;

      li {
        .goods {
          width: 222px;
          height: 332px;
          margin: 0 0 20px 20px;
          font-size: 16px;

           .img-wrap {
            border: 1px solid #d1d3d4;

            > img {
              width: 220px;
              height: 220px;
            }
          }

          .small-img {
            border: 1px solid black;
            width: 30px;
            height: 30px;
            margin-top: 8px;
            > img {
              width: 30px;
              height: 30px;
            }
          }
          .goodsName {
            margin: 5px 0;
            color: #808285;
          }
        }
      }
    }
  }
}
</style>
